<template>
	<view>

		<scroll-view :class="istxl?'scroll-container':''" :scroll-y="true" :scroll-into-view="toView" :scroll-with-animation="true"
			style="width: 100%">
			<view v-if="istxl">
				<uni-list style="width: 100%">
				<view class="conversation-rq">
					<div @click.stop="showNewFriends" class="category-item-container">
						<image src="/static/image/icon/xdpy.png" />
						<div class="category-item">
							<span class="title">{{ $t('contact.new_friend') }}</span>
							<span class="desc" v-if="sharedContactState.unreadFriendRequestCount > 0">
								{{ sharedContactState.unreadFriendRequestCount }}
							</span>
						</div>
					</div>
					<view class="rq-hine"></view>
					<div @click="showGroups" class="category-item-container">
						<image src="/static/image/icon/jltdpy.png" />
						<div class="category-item">
							<span class="title">{{ $t('仅聊天的朋友') }}</span>
							<span class="desc" v-if="sharedContactState.favGroupList.length > 0">
								{{ sharedContactState.favGroupList.length }}
							</span>
						</div>
					</div>
					<view class="rq-hine"></view>
					<div @click="showChannels" class="category-item-container">
						<image src="/static/image/icon/ldss.png" />
						<div class="category-item">
							<span class="title">{{ $t('雷达搜索') }}</span>
							<span class="desc" v-if="sharedContactState.channelList.length > 0">
								{{ sharedContactState.channelList.length }}
							</span>
						</div>
					</div>
					<view class="rq-hine"></view>
					<div @click="showChannels" class="category-item-container">
						<image src="/static/image/icon/ql.png" />
						<div class="category-item">
							<span class="title">{{ $t('群聊') }}</span>
							<span class="desc" v-if="sharedContactState.channelList.length > 0">
								{{ sharedContactState.channelList.length }}
							</span>
						</div>
					</div>
					<view class="rq-hine"></view>
					<div @click="showChannels" class="category-item-container">
						<image src="/static/image/icon/hyfz.png" />
						<div class="category-item">
							<span class="title">{{ $t('好友分组') }}</span>
							<span class="desc" v-if="sharedContactState.channelList.length > 0">
								{{ sharedContactState.channelList.length }}
							</span>
						</div>
					</div>

				</view>
				</uni-list>
			</view>
			<view v-for="(g) in groupedUsers" :key="'pro_'+g.category.toUpperCase()" :id="'pro_'+g.category.toUpperCase()">
				<div ref="contactItem" class="contact-item">
					<div v-if="showCategoryLabel" class="label" :style="paddingStyle"
						v-bind:class="{sticky:enableCategoryLabelSticky}">
						<p>{{ g.category.toUpperCase() }}</p>
					</div>
					<view class="conversation-rq">
						<uni-list style="width: 100%">
							<view v-for="(user, index) in g.users" :key="user.uid">
								<view class="rq-hine" v-if="index > 0"></view>
								<div class="content" :name="'user-'+user.uid" :style="paddingStyle"
									v-bind:class="{active: (sharedContactState.currentFriend
                        && user._category === sharedContactState.currentFriend._category
                        && user.uid === sharedContactState.currentFriend.uid) || (currentUser && currentUser.uid === user.uid)}" @click.stop="clickUserItem(user)">
									<img class="avatar" :src="user.portrait" alt="" @error="imgUrlAlt">
									<div style="padding-left: 10px">
										<p class="single-line"> {{ user._displayName ? user._displayName : user.displayName }}</p>
										<p v-if="user._userOnlineStatusDesc" class="single-line user-online-status">
											{{ user._userOnlineStatusDesc }}
										</p>
									</div>
								</div>
							</view>
						</uni-list>
					</view>
				</div>
			</view>
			<view class="rqd" 
			v-if="istxl&&((groupedUsers.length==1&&groupedUsers[0].groupedUser.users.length==1)||groupedUsers.length==0)">
				<image class="rqdimg" src="/static/image/icon/ktxl.png"></image>
				<view class="tch">
					<image src="/static/image/icon/jjj.png" mode=""></image>
					<view class="">快来增加你的第一个好友</view>
				</view>
			</view>
		</scroll-view>
		<view class="letter-nav" v-if="istxl">
			<view class="item" v-for="(item) in indexList" :key="item" @tap="toSelectIndex(item,$event)">
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
	import store from "../../store";
	import UserCardView from "./UserCardView";
	import Config from "../../config";
	import UniList from "../../components/uni-list/uni-list.vue";

	export default {
		name: "UserListView",
		props: {
			users: {
				type: Array,
				required: true,
			},
			currentUser: {
				type: Object,
				default: null,
			},
			istxl: {
				type: Boolean,
				required: false,
				default: false,
			},
			showCategoryLabel: {
				type: Boolean,
				required: false,
				default: true,
			},
			enableCategoryLabelSticky: {
				type: Boolean,
				required: false,
				default: false,
			},
			clickUserItemFunc: {
				type: Function,
				required: false,
			},
			paddingLeft: {
				type: String,
				required: false,
				default: '5px'
			}
		},
		data() {
			return {
				sharedContactState: store.state.contact,
				toView: '',
				indexList: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				]
			}
		},
		methods: {
			showNewFriends() {
				console.log('nav to NewFriendListPage success');
				uni.navigateTo({
					url: '../contact/NewFriendListPage',
					success: () => {
						console.log('nav to NewFriendListPage success');
					},
					fail: (err) => {
						console.log('nav to NewFriendListPage err', err);
					}
				});
			},
			showGroups() {
				uni.navigateTo({
					url: '../contact/GroupListPage',
					success: () => {
						console.log('nav to GroupListPage success');
			
					},
					fail: (err) => {
						console.log('nav to GroupListPage err', err);
					}
				});
			},
			showChannels() {
				uni.navigateTo({
					url: '../contact/ChannelListPage',
					success: () => {
						console.log('nav to ChannelListPage success');
			
					},
					fail: (err) => {
						console.log('nav to ChannelListPage err', err);
					}
				});
			},
			toSelectIndex(item,e) {
				　e.preventDefault();
				e.stopPropagation();
				this.toView = 'pro_' + item
				setTimeout(()=>{
					this.toView =""
				},500);
			},

			clickUserItem(user) {
				if (this.clickUserItemFunc) {
					this.clickUserItemFunc(user);
				} else {
					store.setCurrentFriend(user)
					uni.navigateTo({
						url: '/pages/contact/NewFriendDetailPage',
						success: () => {
							console.log('nav to NewFriendDetailPage success');
						},
						fail: (err) => {
							console.log('nav to NewFriendDetailPage err', err);
						}
					});
				}
			},

			scrollActiveElementCenter() {
				let el = this.$el.getElementsByClassName("active")[0];
				el && el.scrollIntoView({
					behavior: "instant",
					block: "center"
				});
			},

			imgUrlAlt(e) {
				e.target.src = Config.DEFAULT_PORTRAIT_URL;
			}

		},

		mounted() {
			//	console.log('userList', this.users.length);
		},

		activated() {
			this.scrollActiveElementCenter();
		},

		unmounted() {},

		computed: {
			
			groupedUsers() {
				let groupedUsers = [];
				if (!this.showCategoryLabel) {
					groupedUsers.push({
						category: 'not-show-category',
						users: this.users,
					})
				} else {
					let current = {};
					let lastCategory = null;
					this.users.forEach((user) => {
						if (!lastCategory || lastCategory !== user._category) {
							lastCategory = user._category;
							current = {
								category: user._category,
								users: [user],
							};
							groupedUsers.push(current);
						} else {
							current.users.push(user);
						}
					});
				}
				return groupedUsers;
			},
			paddingStyle() {
				return {
					paddingLeft: this.paddingLeft
				}
			},
		},
		components: {
			UniList,
			UserCardView,
		},
	}
</script>

<style lang="css" scoped>
	.conversation-rq{
		width: calc(100%);
	}
	.category-item-container {
		width: calc(100% - 45px);
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 1000;
		padding-left: 10px;
		color: #262626;
		font-size: 14px;
		position: sticky;
		/* background-color: #fafafa; */
		position: relative;
	}

	.category-item-container image {
		max-width: 40px;
		max-height: 40px;
		margin-right: 10px;
	}


	.category-item {
		display: flex;
		width: 100%;
		align-items: center;
	}

	.category-item .title {
		font-size: 16px;
	}

	.category-item .desc {
		color: #ffffff;
		width: 20px;
		height: 20px;
		font-size: 12px;
		border-radius: 50%;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15px;
	}

	.category-item span:last-of-type {
		margin-right: 15px;
	}

	.scroll-container {
		height: calc(100vh - 60px) ;
	}

	.rqd {
		width: 100%;
		margin-top: 20px;
		text-align: center;
	}

	.rqd .tch image {
		width: 14px;
		height: 14px;
		margin-right: 10px;
	}

	.rqd .tch {

		margin: 20px auto;
		width: calc(100% - 40px);
		height: 46px;
		border-radius: 10px;
		background: #386BF6;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
		font-family: MiSans;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.rqd .rqdimg {
		width: 104px;
		height: 102px;
		text-align: center;
		margin: 0 auto;
	}

	.letter-nav {
		position: fixed;
		top: 5%;
		right: 10px;
		z-index: 9;
	}

	.letter-nav .item {
		padding: 3px 5px;
		/* background-color: #d6d6d6; */
		color: #386BF6;
		text-align: center;
		font-family: MiSans;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		text-transform: uppercase;
		line-height: 1;
		height: calc(3% - 6px);
	}

	.contact-item {
		--user-item-padding-left: 30px;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 8px;
	}

	.checkbox {
		margin-right: 10px;
	}

	.contact-item {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		align-items: flex-start;
	}

	.contact-item .label {
		width: 100%;
		background-color: #fafafa;
	}

	.contact-item .label p {
		padding: 10px 5px 5px 10px;
	}

	.contact-item .label.sticky {
		position: sticky;
		top: 0;
	}

	.contact-item .content {
		padding: 10px 5px 10px 0;
		display: flex;
		width: 100%;
		align-items: center;

	}



	.contact-item .content span {
		margin-left: 10px;
	}

	.contact-item .content.active {
		background-color: #d6d6d6;
	}

	.contact-item .content:active {
		background-color: #d6d6d6;
	}

	.user-online-status {
		color: gray;
		font-size: 10px;
	}

	/*.contact-item .content:hover {*/
	/*  background-color: red;*/
	/*}*/
</style>